<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="res/js/touch-min-0.2.2.js"></script>

</head>
<body>
pinch (scale): <br/>
    <img src="res/images/yun.png" width="200px" height="200px" id="scale"/>


rotate: <br/>
    <img src="res/images/yun.png" id="rotate"/>



<script type="text/javascript">
    touch.on("#scale",'touchstart',function(ev){
        ev.originEvent.preventDefault();
        ev.originEvent.stopPropagation();
    });

    touch.on("#scale",'pinch',{interval:10},function(ev){
        var currentScale = ev.scale - 1;
        currentScale = initialScale + currentScale;
        if(ev.fingerStatus === 'end'){
            initialScale += (ev.scale - 1);
            initialScale = initialScale > 2.5 ? 2.5 : initialScale;
        }
        currentScale = currentScale > 2.5 ? 2.5 : currentScale;
        currentScale = currentScale < 1 ? 1 : currentScale;

        this.style.webkitTransform = 'scale(' + currentScale + ')';
    });




    /******************* roate  start ********************/

    var angle = 30;
    touch.on('#roate', 'touchstart', function(ev){
        ev.startRotate();
        ev.originEvent.preventDefault();
        ev.originEvent.stopPropagation();
    });
    touch.on("#roate","rotate",{interval:10},function(ev){
        var totalAngle = angle + ev.rotation;
        if(ev.fingerStatus === 'end'){
            angle = angle + ev.rotation;
        }

        this.style.webkitTransform = 'rotate(' + totalAngle + 'deg)';
    });
    /******************* roate  end ********************/


</script>
</body>
</html>